<template>
  <div class="container">
    <el-dialog title="新增学科" :visible="showDialog" :width="dialogWidth" @close="close">
      <el-form ref="subData" :model="queryData" :rules="rules" label-width="80px">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="queryData.subjectName" size="small" placeholder="请输入学科名称" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="queryData.isFrontDisplay" aria-setsize="mini" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button type="primary" @click="btnOK">确定</el-button>
            <el-button @click="close">取消</el-button>
          </el-row>

        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/subjects.js'
export default {
  name: 'SubjectAdd',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogWidth: '400px', // 设置弹窗宽度
      queryData: {
        subjectName: '',
        isFrontDisplay: 1
      },
      rules: {
        subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      // 获取到的详细数据
      subUpload: {}
    }
  },
  methods: {
    close() {
      this.$emit('update:showDialog', false)
      this.$refs.subData.resetFields()
      this.queryData.subjectName = ''
      this.queryData.isFrontDisplay = 0
    },
    // 对表单校验添加
    btnOK() {
      this.$refs.subData.validate(async isOK => {
        if (isOK) {
          // 修改
          console.log(this.queryData)
          if (this.queryData.id) {
            await update(this.queryData)
            this.$message.success('修改成功')
          } else {
            // 添加
            await add(this.queryData)
            this.$message.success('添加成功')
          }
          this.close()
          this.$emit('addSub')
        }
      })
    },
    // 获取详细数据
    async detail(id) {
      const { data } = await detail(id)
      this.queryData = data
      console.log(this.queryData)
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  width: 10px;
}
</style>
